import React, { Component } from 'react'
import ReactDom from "react-dom"
import '../../../styles/Home/Zujing.scss'
import Model from '../window/Model'
// import PickerViewExample from '../ant/PickerViewExample'
import { List, Radio } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

const RadioItem = Radio.RadioItem;

class Zujing extends Component {
	constructor(porps) {
		super(porps);
		this.el = document.createElement("div")
	}
	componentDidMount() {
		document.body.appendChild(this.el)
	}
	UNSAFE_componentWillUnmount() {
		document.body.removeChild(this.el)
	}

	state = {
		isFromProps: true,
		show: false,
		// value: null,
		value: 0,
	};

	onChange = (value) => {
		console.log('checkbox');
		this.setState({
			value,
		});
	};

	static getDerivedStateFromProps(nextProps, nextState) {
		if (nextState.isFromProps) {
			return {
				show: nextProps.show,
			};
		} else {
			// 默认是从 props 中获取 show 状态值
			return {
				isFromProps: true,
			};
		}
	}

	handleClose = (params) => {
		// console.log(this);
		this.setState({
			isFromProps: false,
			show: false,
		});
	};

	render() {
		const { value } = this.state;
		const data = [
			{ value: 0, label: '不限' },
			{ value: 1, label: '1000-2000' },
			{ value: 2, label: '2000-3000' },
			{ value: 3, label: '3000-4000' },
			{ value: 4, label: '4000-5000' },
			// { value: 5, label: '5000-7000' },
		];

		return (
			<div>
				{
					this.state.show && ReactDom.createPortal(<div className="modal">
						<div className="mask"></div>
						<div className="modalHeader">
							<Model></Model>
							<div>
								<List renderHeader={() => ''}>
									{data.map(i => (
										<RadioItem key={i.value} checked={value === i.value} onChange={() => this.onChange(i.value)}>
											{i.label}
										</RadioItem>
									))}
								</List>
							</div>
							<div className="caozuo">
								<div className="close" onClick={this.handleClose}>取消</div>
								<div className="right">确定</div>
							</div>
						</div>

					</div>, this.el)
				}
			</div>
		)
	}
}

export default Zujing